<template>
	<div class="lawsRegulation" v-loading="lawsLoading">
		<div class="title">技术档案</div>
    <!-- <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <el-form-item label="">
          <el-input v-model="searchForm.keyWord" placeholder="请输入你要搜索的关键字" suffix-icon="el-icon-search"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="lawsTable">
        <el-table
        :data="technicalList"
        border
        style="">
        <!-- position:relative;width: 1200px; -->
          <el-table-column
            prop="station"
            label="水站名称"
            min-width="160px"
            align="center">
          </el-table-column>
          <el-table-column
            prop="instrumentFiles"
            label="仪器档案"
            min-width="160px"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openOuterDialog(scope.row.instrumentFiles, 'instrumentFiles', '仪器档案')">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="consumableRecords"
            label="易耗品使用记录"
            min-width="160px"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openOuterDialog(scope.row.consumableRecords, 'consumableRecords', '易耗品使用记录')">查看</el-button>
            </template>
          </el-table-column>                 
          <el-table-column
            prop="inspectFile"
            label="例行巡检记录"
            min-width="160px"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openOuterDialog(scope.row.inspectFile, 'inspectFile', '例行巡检记录')">查看</el-button>
            </template>
          </el-table-column>                 
          <el-table-column
            prop="acceptanceRecord"
            label="竣工验收报告"
            min-width="160px"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openFile(scope.row.acceptanceRecord)">查看</el-button>
            </template>
          </el-table-column>  
        </el-table>
      
    </div>

    <el-dialog width="90%" :visible.sync="outerVisible" append-to-body>
      <div slot="title">{{outerDialog.title}}</div>
      <div v-if="outerDialog.type === 'instrumentFiles'">
        <el-table
          :data="outerDialog.data"
          border
          style="width: 100%">
          <el-table-column
            prop="instrumentName"
            label="仪器名称"
            align="center">
            <template slot-scope="scope">{{scope.row.instrumentName}}</template>
          </el-table-column>
          <el-table-column
            prop="producer"
            label="生产厂家"
            align="center">
            <template slot-scope="scope">{{scope.row.producer}}</template>
          </el-table-column>
          <el-table-column
            prop="installer"
            label="安装单位"
            align="center">
            <template slot-scope="scope">{{scope.row.installer}}</template>
          </el-table-column>
          <el-table-column
            prop="manual"
            label="说明书"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openFile(scope.row.manual)">
                <span class="preWrap">{{scope.row.manual ? scope.row.manual.split(',')[0] : '查看'}}</span>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="installRecord"
            label="安装记录"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openFile(scope.row.installRecord)">
                <span class="preWrap">{{scope.row.installRecord ? scope.row.installRecord.split(',')[0] : '查看'}}</span>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="debugDoc"
            label="运行调试报告"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openFile(scope.row.debugDoc)">
                <span class="preWrap">{{scope.row.debugDoc ? scope.row.debugDoc.split(',')[0] : '查看'}}</span>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="operationDoc"
            label="操作规范"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openFile(scope.row.operationDoc)">
                <span class="preWrap">{{scope.row.operationDoc ? scope.row.operationDoc.split(',')[0] : '查看'}}</span>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="repairFile"
            label="检验记录"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openInnerDialog(scope.row.repairFile, 'repairFile', '检修记录')">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="maintenanceFile"
            label="维护记录"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openInnerDialog(scope.row.maintenanceFile, 'maintenanceFile', '维护记录')">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="outerDialog.type === 'consumableRecords'">
        <el-table
          :data="outerDialog.data"
          border
          style="width: 100%">
          <el-table-column
            prop="consumable"
            label="易耗品名称"
            align="center">
            <template slot-scope="scope">{{scope.row.consumable}}</template>
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量"
            align="center">
            <template slot-scope="scope">{{scope.row.number}}</template>
          </el-table-column>
          <el-table-column
            prop="gmtCreate"
            label="时间"
            align="center">
            <template slot-scope="scope">{{scope.row.gmtCreate}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="outerDialog.type === 'inspectFile'">
        <el-table
          :data="outerDialog.data"
          border
          style="width: 100%">
          <el-table-column
            prop="station"
            label="水站名称"
            align="center">
            <template slot-scope="scope">{{scope.row.station}}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="记录名称"
            align="center">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="巡检记录"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="openFile(scope.row.path)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="gmtCreate"
            label="时间"
            align="center">
            <template slot-scope="scope">{{scope.row.gmtCreate}}</template>
          </el-table-column>
          
        </el-table>
      </div>
      <!-- <el-table
        :data="curDialogInfo.groupData"
        border
        style="width: 100%">
        
        <el-table-column v-for="item of curDialogInfo.groupData" :key="item.index"
          :prop="item.prop"
          :label="item.label">
        </el-table-column>
      </el-table> -->

      <el-dialog width="60%" :visible.sync="innerVisible" append-to-body>
        <div slot="title">{{innerDialog.title}}</div>
        <div v-if="innerDialog.type === 'maintenanceFile'">
          <el-table
            :data="innerDialog.data"
            border
            style="width: 100%">
            <el-table-column
              prop="instrument"
              label="仪器名称"
              align="center">
              <template slot-scope="scope">{{scope.row.instrument}}</template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="记录名称"
              align="center">
              <template slot-scope="scope">{{scope.row.name}}</template>
            </el-table-column>
            <el-table-column
              prop="path"
              label="维护记录"
              align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="openFile(scope.row.path)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="gmtCreate"
              label="时间"
              width="170"
              align="center">
            </el-table-column>
            
          </el-table>
        </div>
        <div v-if="innerDialog.type === 'repairFile'">
          <el-table
            :data="innerDialog.data"
            border
            style="width: 100%">
            <el-table-column
              prop="instrument"
              label="仪器名称"
              align="center">
              <template slot-scope="scope">{{scope.row.instrument}}</template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="记录名称"
              align="center">
              <template slot-scope="scope">{{scope.row.name}}</template>
            </el-table-column>
            <el-table-column
              prop="path"
              label="检修记录"
              align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="openFile(scope.row.path)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="gmtCreate"
              label="时间"
              width="170"
              align="center">
            </el-table-column>
            
          </el-table>
        </div>
      </el-dialog>

    </el-dialog>
	</div>
</template>
<script>
import {mapActions, mapGetters} from "vuex"
export default { 
  name: 'lawsRegulation',
  data () {
    return {
      msg: 'hello lawsRegulation!',
      lawsLoading: false,
      searchForm: {
        keyWord: '',
      },
      lawsTable: [
        {
          device: 'device',
          changjia: 'changjia',
          danwei: 'danwei',
          sms: 'sms',
          azjl: 'azjl',
          yxts: 'yxts',
          yhp: 'yhp',
          jyjl: 'jyjl',
          czgf: 'czgf',
          whjxjxl: 'whjxjxl',
        },
        {
          device: 'device',
          changjia: 'changjia',
          danwei: 'danwei',
          sms: 'sms',
          azjl: 'azjl',
          yxts: 'yxts',
          yhp: 'yhp',
          jyjl: 'jyjl',
          czgf: 'czgf',
          whjxjxl: 'whjxjxl',
        },
        {
          device: 'device',
          changjia: 'changjia',
          danwei: 'danwei',
          sms: 'sms',
          azjl: 'azjl',
          yxts: 'yxts',
          yhp: 'yhp',
          jyjl: 'jyjl',
          czgf: 'czgf',
          whjxjxl: 'whjxjxl',
        },
        {
          device: 'device',
          changjia: 'changjia',
          danwei: 'danwei',
          sms: 'sms',
          azjl: 'azjl',
          yxts: 'yxts',
          yhp: 'yhp',
          jyjl: 'jyjl',
          czgf: 'czgf',
          whjxjxl: 'whjxjxl',
        },
      ],

      outerVisible: false,
      innerVisible: false,
      outerDialog: {
        title: '外部dialog',
        type: '', //instrumentFiles --> 仪器档案   consumableRecords --> 易耗品使用记录   inspectFile --> 例行巡检记录
        data: [],
      },
      innerDialog: {
        title: '内部dialog',
        type: '', //maintenanceFile --> 维护记录    repairFile --> 检修记录 
        data: []
      }
		}
  },
	methods: {
    ...mapActions([
      'fetchTechnicalList'
    ]),
    async onSubmit() {
      this.lawsLoading = true

      await this.fetchTechnicalList(this.searchForm.keyWord)

      this.lawsLoading = false
    },
    openOuterDialog(data, type, title) {
      this.outerDialog.title = title
      this.outerDialog.type = type
      this.outerDialog.data = data
      this.outerVisible = true
    },
    openInnerDialog(data, type, title) {
      this.innerDialog.title = title
      this.innerDialog.type = type
      this.innerDialog.data = data
      this.innerVisible = true
    },
    openFile(path) {
      if(path) {
        window.open('http://47.112.16.168:' + path.split(',')[path.split(',').length - 1])
      }else {
        this.$notify({
          title: '警告',
          message: '文件丢失或者不存在!',
          type: 'warning'
        });
      }
    }
  },
  created() {
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      technicalList: 'getTechnicalList',
    })
  },
}
</script>
<style scoped>
.lawsRegulation {
  background: #fff;
  min-height: 100%;
  padding: 0 20px 0 20px;
}
.lawsRegulation .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.lawsRegulation .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  margin-bottom: 30px;
  border-bottom: 1px dashed #dcdce0;
  padding-bottom: 15px;
}
.searchBox .line {
  text-align: center;
}
.dataListBox {}
.dataListBox .dataItem {
  font-size: 16px;
  line-height: 44px;
  color: #303030;
  text-decoration: underline;
}
.dataListBox .dataItem .name {
  margin-right: 10%;
  width: 60%;
}
.preWrap {
  white-space: pre-wrap;
}

.lawsTable {
  position: relative;
}

</style>
